<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有人智造-经营驾驶舱</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.esm.min.js"></script>-->
    <link rel="icon" href="/static/img/logo.png" type="image/x-icon"> <!-- 链接到favicon.ico文件 -->
    <style>
        .body{
            width: 100%;
            height: 1200px;
            /*background-color: #f5f7fa;*/
            font-size: 25px;
            background: linear-gradient(to bottom right, blue, pink);
            background-image: url("/static/img/017d6a5c513b9ca801213f26c6f65d.png@2o.png");
            background-size: cover;
            /*overflow-y: hidden;*/
        }
        h1{
            width: 30%;
            margin: 0 auto;
            color: white;
            background: linear-gradient(-45deg, transparent 34px, #134194 0) right,
            linear-gradient(45deg, transparent 34px, #134194 0) left;
            background-size: 50% 100%;
            background-repeat: no-repeat;
            margin-bottom: 20px;
        }
        table th:nth-child(odd){
            background-color: #2bb9ba;
            color: white;
        }
        table th:nth-child(even){
            background-color:#134094;
            color: white;
        }
        table tr:nth-child(odd){
            background-color: #7DC4CC;
            color: white;
        }

        .table1 tr th{
            padding: 0;
            text-align: center;
        }
        .table1 tr td{
            padding: 0;
        }
        .container {
            max-width: 5000px;
            width: 100%;
            /*width: 1510px;*/
            /*margin: 0 auto;*/
            display: inline-block;
            padding: 0;
            /*background-color: red;*/
            height: 350px; /* 设置容器的高度 */
            overflow: auto; /* 启用垂直滚动 */
            /*margin-left: 70px;*/
            overflow-y: hidden;
            overflow-x: hidden;
            position: relative; /* 相对定位以容纳滚动内容 */
            /*display: flex;*/
            /*float: left;*/

        }
        .container1{
            width: 100%;
            /*width: 1800px;*/
            /*background-color: #666aff;*/
            position: absolute; /* 绝对定位 */
            top: 0; /* 初始位置为顶部 */
            /*animation: move 5s linear infinite; !* 使用动画滚动 *!*/
            animation-name: move;
            /*animation-duration: 800s;*/
            animation-timing-function: linear;
            /*animation-delay: 1s;*/
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-fill-mode: forwards;
        }

        .container2 {
            max-width: 5000px;
            width: 100%;
            /*width: 1510px;*/
            /*margin: 0 auto;*/
            display: inline-block;
            /* padding: 0; */
            /*background-color: red;*/
            height: 190px; /* 设置容器的高度 */
            overflow: auto; /* 启用垂直滚动 */
            /*margin-left: 70px;*/
            overflow-y: hidden;
            overflow-x: hidden;
            position: relative; /* 相对定位以容纳滚动内容 */
            /*display: flex;*/
            /*float: left;*/

        }
        .container21{
            width: 100%;
            /*width: 1800px;*/
            /*background-color: #666aff;*/
            position: absolute; /* 绝对定位 */
            top: 0; /* 初始位置为顶部 */
            /*animation: move 5s linear infinite; !* 使用动画滚动 *!*/
            animation-name: move;
            /*animation-duration: 800s;*/
            animation-timing-function: linear;
            /*animation-delay: 1s;*/
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-fill-mode: forwards;
        }
        /* 滚动动画 */
        @keyframes move {
            /*0% {*/
            /*    top: 0; !* 开始时回到顶部 *!*/
            /*}*/
            /*100% {*/
            /*    top: -100%; !* 结束时滚动到底部 *!*/
            /*}*/
            from {
                transform: translateY(0);
            }
            to {
                transform: translateY(-10%);
            }
        }
        .main1{
            width: 100%;
            height: 460px;
            background-color: #7bd4ce;
        }
        .main2{
            width: 100%;
            height: 550px;
            /*background-color: #caf2ff;*/
            display: flex;
            margin-bottom: 10px;
        }
        .bottom1{
            width: 30%;
            height: 100%;
            background-color: #caf2ff;
            /*padding-left: 30px;*/
        }
        .bottom2s{
            width: 70%;
            height: 100%;
        }
        .bottom2{
            width: 100%;
            height: 50%;
            background-color: #caf2ff;
            margin-left: 10px;
        }
        .p1{
            width: 100%;
            font-weight: 700;
            font-size: 20px;
            /*display: flex;*/
            /* margin-left: 30px; */
        }
        h3{
            width: 100%;
            height: 50px;
            line-height: 50px;
            color: white;
            background: linear-gradient(-45deg, transparent 14px, #134194 50px) right;
            background-size: 100% 100%;
            /*padding-left: 20px;*/
            /*font-size: 15px;*/
        }
        #mySelect1{
            width: 100px;
            font-size: 15px;
            background-color: #caf2ff;
            float: right;
            margin-top: 15px;
        }
        #mySelect2{
            width: 100px;
            font-size: 15px;
            background-color: #caf2ff;
            float: right;
            margin-top: 15px;
            margin-right: 10px;
        }
        .cqSelect{
            display: inline-block;
            font-size: 15px;
            float: right;
        }
        #p1 p:nth-child(even){
          background-color: #2bb9ba;
          height: 35px;
          line-height:35px;
        }
    </style>
</head>
<body class="body">
<div class="main" >
    <h1 style="text-align: center ">经营驾驶舱</h1>
    <div class="main">
        <div class="main2">
            <div class="bottom1">
                <h3>
                    生产部管理指标
                    <select class="select" name="TIME" id="mySelect1">
                        <option value="">范围选择</option>
                        <option value="360">360天</option>
                        <option value="180">180天</option>
                        <option value="90">90天</option>
                        <option value="60">60天</option>
                        <option value="30">30天</option>
                    </select>
                    <select class="select" name="TIME" id="mySelect2">
                        <option value="">选择客户</option>
                        {foreach $client as $k=>$v}
                        <option value="{$v['CUST_CODE']}">{$v['CUST_CODE']}</option>
                        {/foreach}
                    </select>
                </h3>
                <div class="p1" id="p1">
                    <p>工单完结率:{$data2['sc_gd_gjl']}%</p>
                    <p>工单完结周期  最大值:{$data2['sc_gd_wj_time_max']}   最小值:{$data2['sc_gd_wj_time_min']}   平均值:{$data2['sc_gd_wj_time_avg']}</p>
                    <p>超均值工单比例:{$data2['sc_gd_cjz_bl']}%</p>
                    <p>超期工单比例:{$data2['cqCount']}%</p>
                    <p>工单不良率   最大值:{$data2['sc_gd_bl_max']}%   最小值:{$data2['sc_gd_bl_min']}%   平均值:{$data2['sc_gd_bl_avg']}%</p>
                    <p>不良率超标订单数量:{$data2['Ngcounts']}</p>
                    <p>订单准备周期   最大值:{$data2['sc_gd_zb_time_max']}   最小值:{$data2['sc_gd_zb_time_min']}   平均值:{$data2['sc_gd_zb_time_avg']}</p>
                    <p>采购周期   最大值:{$data2['cg_zq_max']}   最小值:{$data2['cg_zq_min']}   平均值:{$data2['cg_zq_avg']}</p>
                    <p>上线前准备周期   最大值:{$data2['zld_sx_max']}   最小值:{$data2['zld_sx_min']}   平均值:{$data2['zld_sx_avg']}</p>
                    <p>制造周期   最大值:{$data2['zld_zz_max']}   最小值:{$data2['zld_zz_min']}   平均值:{$data2['zld_zz_avg']}</p>
                </div>
            </div>
            <div class="bottom2s">
            <div class="bottom2">
                <h3>仓库管理数据</h3>
                <table class="table table1" style="margin-bottom: -2px;">
                    <tr style="margin-bottom: -15px;font-size: 20px;">
                        <th width="40px">序号</th>
                        <th width="150px">物料料号</th>
                        <th width="200px">型号</th>
                        <th width="80px">U8库存数量</th>
                        <th width="150px">MES库存数量</th>
                        <th width="150px">差异数量</th>
                    </tr>
                </table>
                <div class="{if $data3['count']>=5}container2{/if}">
                    <div class="{if $data3['count']>=5}container21{/if}" style="animation-duration:{$data3['count']/2}s;">
                        <table class="table table1" >
                            {foreach $data3['data'] as $k=>$v}
                            <tr style="text-align: center;">
                                <td width="40px" style="font-size: 15px;">{$k+1}</td>
                                <td  width="150px" style="font-size: 15px;">{$v['cInvCode']}</td>
                                <td  width="200px" style="font-size: 15px;">{$v['cInvStd']}</td>
                                <td width="80px" style="font-size: 15px;">{:$v['iQuantity']}</td>
                                <td width="150px" style="font-size: 15px">{$v['mesQTY']}</td>
                                <td width="150px" style="font-size: 15px">{$v['cy_number']}</td>
                            </tr>
                            {/foreach}
                        </table>
                    </div>
                </div>
            </div>
            <div class="bottom2">
                <h3>呆滞料数据</h3>
                <table class="table table1" style="margin-bottom: -2px;">
                    <tr style="margin-bottom: -15px;font-size: 20px;">
                        <th width="40px">序号</th>
                        <th width="150px">物料料号</th>
                        <th width="150px">物料SN</th>
                        <th width="80px">物料数量</th>
                        <th width="150px">保质期</th>
                        <th width="150px">入库时间</th>
                    </tr>
                </table>
                <div class="{if $data4['count']>=5}container2{/if}">
                    <div class="{if $data4['count']>=5}container21{/if}" style="animation-duration:{$data4['count']/2}s;">
                        <table class="table table1">
                            {foreach $data4['data'] as $k=>$v}
                            <tr style="text-align: center ;">
                                <td width="40px" style="font-size: 15px;padding: 0">{$k+1}</td>
                                <td width="150px" style="font-size: 15px">{$v['ITEM_CODE']}</td>
                                <td width="150px" style="font-size: 15px;">{$v['ITEM_SN']}</td>
                                <td width="80px" style="font-size: 15px">{:$v['ITEM_QTY']}</td>
                                <td width="150px" style="font-size: 15px">{$v['INVALID_DATE']}</td>
                                <td width="150px" style="font-size: 15px">{$v['CREATE_TIME']}</td>
                            </tr>
                            {/foreach}
                        </table>
                    </div>
                </div>
            </div>
            </div>
        </div>
        <div class="main1">
            <h3>生产信息展示</h3>
            <table class="table table1" style="margin-bottom: -2px">
                <tr style="text-align: center;">
                    <th width="40px" style="padding: 0;font-size: 20px">序号</th>
                    <th width="150px">生产订单编号</th>
                    <th width="120px">状态</th>
                    <th width="150px" style="font-size: 15px;line-height: 30px">工单是否超期 <select class="cqSelect" name="" id="cq">
                        <option value="0">默认</option>
                        <option value="1">是</option>
                        <option value="2">否</option>
                    </select></th>
                    <th width="150px">关联销售订单</th>
                    <th width="100px">不良率</th>
                    <th width="100px">制令单</th>
                    <th width="100px">采购单号</th>
                    <th width="100px">IQC</th>
                    <th width="100px">FQC</th>
                    <th width="350px">完结周期</th>
                    <th width="100px">明细</th>
                </tr>
            </table>
            <div class="{if $data['count']>=8}container{/if}">
                <div class="{if $data['count']>=8}container1{/if}" style="animation-duration:{$data['count']/4}s;">
                    <table class="table table1" id="table1">
                        {foreach $data['data'] as $k=>$v}
                        <tr style="text-align: center ;">
                            <td width="40px" style="font-size: 20px;padding: 0">{$k+1}</td>
                            <td width="150px">{$v['PROJECT_NO']}</td>
                            <td width="120px">{$v['STATUS']}</td>
                            <td width="150px">{:$v['cq']}</td>
                            <td width="150px" style="font-size: 20px">{$v['cSoCode']}</td>
                            <td width="100px">{$v['NgCount']}%</td>
                            <td width="100px"><a href="modoc?ID={$v['ID']}">查看</a></td>
                            <td width="100px"><a href="procurement?PROJECT_NO={$v['PROJECT_NO']}">查看</a></td>
                            <td width="100px"><a href="pidIqc?PROJECT_NO={$v['PROJECT_NO']}">查看</a></td>
                            <td width="100px"><a href="pidFqc?PROJECT_NO={$v['PROJECT_NO']}">查看</a></td>
                            {if $v['CLOSE_TIME']==''}
                            <td width="350px" style="font-size: 15px">{$v['CREATE_TIME']}~{$v['ACTUAL_END_TIME']}</td>
                            {else}
                            <td width="350px" style="font-size: 15px">{$v['CREATE_TIME']}~{$v['CLOSE_TIME']}</td>
                            {/if}
                            <td width="100px"><a href="operatingDetail?ID={$v['ID']}">查看</a></td>
                        </tr>
                        {/foreach}
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function (){
        $("#mySelect1").change(function (){
            //获取选中的下拉选项
            let res=$(this).val()
            var p1=document.getElementById('p1')
            $.ajax({
                url:'/produce',
                type:'get',
                data:{day:res},
                dataType:'json',
                success:function (data){
                    data=data.data
                    if(data.sc_gd_zb_time_min==null){
                        data.sc_gd_zb_time_min=0;
                    }
                    if(data.sc_gd_zb_time_max==null){
                        data.sc_gd_zb_time_max=0;
                    }
                    var html='<p>工单完结率：'+data.sc_gd_gjl+'%</p>\n' +
                        '                    <p>工单完结周期 最大值:'+data.sc_gd_wj_time_max+' 最小值:'+data.sc_gd_wj_time_min+' 平均值：'+data.sc_gd_wj_time_avg+'</p>\n' +
                        '                    <p>超均值工单比例：'+data.sc_gd_cjz_bl+'%</p>\n' +
                        '                    <p>超期工单比例：'+data.cqCount+'%</p>\n' +
                        '                    <p>工单不良率 最大值:'+data.sc_gd_bl_max+'% 最小值:'+data.sc_gd_bl_min+'% 平均值:'+data.sc_gd_bl_avg+'%</p>\n' +
                        '                    <p>不良率超标订单数量:'+data.Ngcounts+'</p>\n' +
                        '                    <p>订单准备周期 最大值:'+data.sc_gd_zb_time_max+' 最小值:'+data.sc_gd_zb_time_min+' 平均值:'+data.sc_gd_zb_time_avg+'</p>\n' +
                        '                    <p>采购周期 最大值:'+data.cg_zq_max+' 最小值:'+data.cg_zq_min+' 平均值:'+data.cg_zq_avg+'</p>\n' +
                        '                    <p>上线前准备周期 最大值:'+data.zld_sx_max+' 最小值:'+data.zld_sx_min+' 平均值:'+data.zld_sx_avg+'</p>\n' +
                        '                    <p>制造周期 最大值:'+data.zld_zz_max+' 最小值:'+data.zld_zz_min+' 平均值:'+data.zld_zz_avg+'</p>';
                    p1.innerHTML=''
                    p1.innerHTML=html;
                }
            })
        })
        $("#mySelect2").change(function (){
            //获取选中的下拉选项
            let res=$(this).val()
            console.log(res)
        })
        $("#cq").change(function (){
            //获取选中的下拉选项
            let res=$(this).val()
            let cq=document.getElementById('table1')
            $.ajax({
                url:'/produceCq',
                type:'get',
                data:{cq:res},
                dataType:'json',
                success:function (data){
                    var html=''
                    $.each(data.data,function (i,v){
                        i=i+1
                        if(v.CONNECT_DOC===null){
                            v.CONNECT_DOC=''
                        }
                        if(v.CLOSE_TIME===null){
                            if(v.ACTUAL_END_TIME===null){
                                v.ACTUAL_END_TIME=''
                            }
                            html+='<tr style="text-align: center ;">\n' +
                                '                            <td width="40px" style="font-size: 20px;padding: 0">'+i+'</td>\n' +
                                '                            <td width="150px">'+v.PROJECT_NO+'</td>\n' +
                                '                            <td width="120px">'+v.STATUS+'</td>\n' +
                                '                            <td width="150px">'+v.cq+'</td>\n' +
                                '                            <td width="150px">'+v.cSoCode+'</td>\n' +
                                '                            <td width="100px">'+v.NgCount+'%</td>\n' +
                                '                            <td width="100px"><a href="modoc?ID='+v.ID+'">制令单</a></td>\n' +
                                '                            <td width="100px"><a href="procurement?PROJECT_NO='+v.PROJECT_NO+'">采购单号</a></td>\n' +
                                '                            <td width="100px"><a href="pidIqc?PROJECT_NO='+v.PROJECT_NO+'">IQC</a></td>\n' +
                                '                            <td width="100px"><a href="pidFqc?PROJECT_NO='+v.PROJECT_NO+'">FQC</a></td>\n' +
                                '                            <td width="350px" style="font-size: 15px">'+v.CREATE_TIME+'~'+v.ACTUAL_END_TIME+'</td>\n' +
                                '                            <td width="100px"><a href="operatingDetail?ID='+v.ID+'">明细</a></td>\n' +
                                '                        </tr>'
                        }else{
                            html+='<tr style="text-align: center ;">\n' +
                                '                            <td width="40px" style="font-size: 20px;padding: 0">'+i+'</td>\n' +
                                '                            <td width="150px">'+v.PROJECT_NO+'</td>\n' +
                                '                            <td width="120px">'+v.STATUS+'</td>\n' +
                                '                            <td width="150px">'+v.cq+'</td>\n' +
                                '                            <td width="150px">'+v.cSoCode+'</td>\n' +
                                '                            <td width="100px">'+v.NgCount+'%</td>\n' +
                                '                            <td width="100px"><a href="modoc?ID='+v.ID+'">制令单</a></td>\n' +
                                '                            <td width="100px"><a href="procurement?PROJECT_NO='+v.PROJECT_NO+'">采购单号</a></td>\n' +
                                '                            <td width="100px"><a href="pidIqc?PROJECT_NO='+v.PROJECT_NO+'">IQC</a></td>\n' +
                                '                            <td width="100px"><a href="pidFqc?PROJECT_NO='+v.PROJECT_NO+'">FQC</a></td>\n' +
                                '                            <td width="350px" style="font-size: 15px">'+v.CREATE_TIME+'~'+v.CLOSE_TIME+'</td>\n' +
                                '                            <td width="100px"><a href="operatingDetail?ID='+v.ID+'">明细</a></td>\n' +
                                '                        </tr>'
                        }
                    })
                    cq.innerHTML=''
                    cq.innerHTML=html
                }
            })
        })
    })
</script>
</html>